import { configureStore, createSlice, createSelector } from "@reduxjs/toolkit";
import logger from "redux-logger";

// createSlice configureStore

// 1. 创建 切片一
const counter1Slice = createSlice({
  name: "counter1",
  initialState: { number: 0 },
  reducers: {
    add: (state) => {
      state.number += 1;
    },
    minus: (state, action) => {
      state.number -= action.payload;
    },
  },
});
// 3. 创建 切片一 actionCreator
const { add: add1, minus: minus1 } = counter1Slice.actions;

// 4. 创建 切片二
const counter2Slice = createSlice({
  name: "counter2",
  initialState: { number: 0 },
  reducers: {
    add: (state) => {
      state.number += 1;
    },
    minus: (state, action) => {
      state.number -= action.payload;
    },
  },
});
// 5. 创建 切片二 actionCreator
const { add: add2, minus: minus2 } = counter2Slice.actions;

// 6. 创建 store
const store = configureStore({
  // 6-1. 处理 多个 reducer  切片一 切片二 reducer

  // counter1Slice.reducerPath ====> 对应 切片 name: "counter1" 这个字段
  reducer: {
    [counter1Slice.reducerPath]: counter1Slice.reducer,
    [counter2Slice.reducerPath]: counter2Slice.reducer,
  },
  // 6-2. 处理 多个 中间件
  middleware: (defaultMiddlewares) => [...defaultMiddlewares(), logger], //配置中间件
  preloadedState: {
    // 6-3.  处理 多个 state  切片一 切片二 state

    // counter1Slice.reducerPath ====> 对应 切片 name: "counter1" 这个字段
    [counter1Slice.reducerPath]: { number: 0 },
    [counter2Slice.reducerPath]: { number: 0 },
  }, //配置初始状态
});
const valueEl1 = document.getElementById("value1");
function render1() {
  valueEl1.innerHTML = store.getState().counter1.number;
}
render1();
store.subscribe(render1);
const valueEl2 = document.getElementById("value2");
function render2() {
  valueEl2.innerHTML = store.getState().counter2.number;
}
render2();
store.subscribe(render2);

const sumSelector = createSelector(
  [(state) => state.counter1, (state) => state.counter2],
  (counter1, counter2) => {
    console.log("计算sum");
    return counter1.number + counter2.number;
  }
);
const sumEl = document.getElementById("sum");
function renderSUM() {
  sumEl.innerHTML = sumSelector(store.getState());
}
renderSUM();
// 7. store 订阅
store.subscribe(renderSUM);

// 8. 使用 dispatch
document
  .getElementById("add1")
  .addEventListener("click", () => store.dispatch(add1()));
document
  .getElementById("minus1")
  .addEventListener("click", () => store.dispatch(minus1(0)));
document
  .getElementById("add2")
  .addEventListener("click", () => store.dispatch(add2()));
document
  .getElementById("minus2")
  .addEventListener("click", () => store.dispatch(minus2(0)));
